<template>
	<view>
		<!-- 考试分数 -->
		<view class="score">
			<view class="s1">
				<text style="font-weight: bold; font-size: 30px; color: red;font-style: italic; text-decoration-line: underline;">{{score}}</text>
			</view>
			<view>
				<view>
					<view>试卷名称</view>
					<view>2021年考研数学一</view>
				</view>
				<view>
					<view>考试用时</view>
					<view>time:{{time}}</view>
				</view>
			</view>
		</view>
		
		<!-- 考试情况 -->
		<view>
			<view class="title">考试情况</view>
			<view class="examResult">
				<view>
					<view>一共</view>
					<view style="color: #BFD2FF;">{{total}}</view>
				</view>
				<view>
					<view>答对</view>
					<view style="color: #3DC7B2">{{correctNumber}}</view>
				</view>
				<view>
					<view>答错</view>
					<view style="color: #FF6B6A;">{{errorNumber}}</view>
				</view>
				<view>
					<view>未答</view>
					<view style="opacity: 50%;">{{empty}}</view>
				</view>
				<view>
					<view>总用时</view>
					<view>{{ftime}}</view>
				</view>
			</view>
		</view>
		
		<!-- 答题卡 -->
		<view class="questionCard">
			<view>
				<view class="title">答题卡</view>
			</view>
			<view class="t1">
				<text>单选题:</text>
			</view>
			<view class="single">
				<view class="qList" v-for="(item,index) in sQuestionList" :key="item.questionId">
					<button @click="choose" :data-qid="item.questionId" :class="isRight[index+1] == 1 ? 'btn2': isRight[index+1] == 0 ? 'btn3': 'btn1'" >{{item.questionId}}</button>
				</view>
			</view>
			<view class="t2">
				<text>填空题:</text>
			</view>
			<view class="fillBlank">
				<view class="qList" v-for="(item,index) in fQuestionList" :key="item.questionId">
					<button @click="choose" :data-qid="item.questionId" :class="isRight[index+sAll+1] == 1 ? 'btn2': isRight[index+sAll+1] == 0 ? 'btn3': 'btn1'">{{item.questionId}}</button>
				</view>
			</view>
		</view>
		<view class="">
			<button @click="returnIndex" style="color: white; background-color: #90A672; box-shadow: 0 0 100rpx #FFDDE0;width: 40%;margin-top: 10%;border-radius: 30rpx;">返回首页</button>
		</view>
	</view>
</template>

<script>
	import { uniPopup } from '@dcloudio/uni-ui';
	
	export default {
		data() {
			return {
				rate:0,
				finalRate:0,
				isRight:[],
				ftime:0,
				time:0,
				sQuestionList:[],
				fQuestionList:[],
				selection:[],
				sAll:0,
				empty:0,
				total:0,
				score:0,
				correctNumber:0,
				errorNumber:0,
				showPopup: false,
				totalTime: 7200, // 总时间（单位：秒）
				remainingTime: 7200, // 剩余时间（单位：秒）
				timerId: null,  // 计时器 ID
				condition1: 1,
				condition2: 0,
				value1: 'btn2',
				value2: 'btn3',
				value3: 'btn1'
			}
		},
		methods: {
			
			returnIndex(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			
			
			
			
			
			listSingle:function(){
				var that = this;
				//挂载后给服务端发请求
				uni.request({
					url:"http://localhost:8888/singleQuestion",
					success(res){
						if(res.data.code==200){
							that.sQuestionList = res.data.data;
							that.$forceUpdate();
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			singleNum:function(){
				var that = this;
				uni.request({
					url:"http://localhost:8888/singleNum",
					success(res) {
						if(res.data.code==200){
							that.sAll=res.data.data[0].sAll;
							console.log("count:"+that.sAll);
							that.$forceUpdate();
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			listFill:function(){
				var that = this;
				//挂载后给服务端发请求
				uni.request({
					url:"http://localhost:8888/FillQuestion",
					success(res){
						if(res.data.code==200){
				
							that.fQuestionList = res.data.data;
							that.$forceUpdate();
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			choose:function(e){
				console.log(e);
				uni.setStorageSync('qid',e.target.dataset.qid);
				uni.navigateTo({
					url:'/pages/questionReview/questionReview'
				});
				// uni.navigateBack({
				// 	delta:1
				// });
			},
			
			
			
			
			
			startTimer() {
			      this.timerId = setInterval(() => {
			        this.remainingTime--;
			        if (this.remainingTime === 0) {
			          clearInterval(this.timerId);
			          // 倒计时结束后的逻辑处理
			          // 例如：提交答题结果或显示时间到达的提示信息
			        }
			      }, 1000); // 每秒执行一次
			    },
			    formatTime(time) {
			      const hours = Math.floor(time / 3600);
			      const minutes = Math.floor((time % 3600) / 60);
			      const seconds = time % 60;
			      return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			    },
			    padZero(value) {
			      return value.toString().padStart(2, '0');
			    }
			  },
			  beforeDestroy() {
			    clearInterval(this.timerId); // 组件销毁前清除计时器
			  },
		mounted() {
			this.singleNum();
			this.listSingle();
			this.listFill();
			console.log("123"+uni.getStorageSync('isRight'));
			this.isRight=(uni.getStorageSync('isRight'));
			this.ftime=(uni.getStorageSync('ftime'));
			this.time=(uni.getStorageSync('time'));
			this.selection=(uni.getStorageSync('selection'));
			this.total= (uni.getStorageSync('total'));
			this.errorNumber= (uni.getStorageSync('errorNumber'));
			this.score = (uni.getStorageSync('sum'));
			this.correctNumber= (uni.getStorageSync('correctNumber'));
			this.empty=this.total-this.errorNumber-this.correctNumber;
			console.log("sum:"+uni.getStorageSync('sum'));
			this.startTimer();
			this.rate=this.correctNumber/this.total;
			this.finalRate=(this.rate.toFixed(2))*100;
			uni.setStorageSync('finalRate',this.finalRate);
		}
		
	}
</script>

<style>
	body {
		background-color:#F0EEEF;
	}
	.s1{
		text-align: center;
	}
	/* 考试分数 */
	.score {
		width: 700rpx;
		margin: 20rpx;
		border: 1px solid red;
		border-radius: 20rpx;
	}
	.score image{
		width: 100rpx;
		height: 100rpx;
	}
	.score >view:nth-child(2) view {
		display: flex;
		justify-content: space-between;
		padding: 4rpx;
	}
	
	/* 考试情况 */
	.title {
		margin-left: 20rpx;
		margin-top: 40rpx;
	}
	.examResult {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 700rpx;
		height: 120rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		border: 1px solid green;
		background-color: #F0EEEF ;
	}
	.examResult view {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}
	
	/* 答题卡 */
	/* .questionCard button {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100px;
		background-color: #F0EEEF;
		color: white;
	} */
	.single >view {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100px;
		/* background-color: #F0EEEF; */
		color: white;
		padding-right: 20px;
		padding-top: 20px;
	}
	.fillBlank >view {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100px;
		/* background-color: #F0EEEF; */
		color: white;
		padding-right: 20px;
		padding-top: 20px;
	}
	.qList{
		height: 50px;
		width: 50px;
		border-radius: 50px;
	}
	.btn1{
		height: 50px;
		width: 50px;
		border-radius: 50px;
		background-color: darkgray;
		color: white;
	}
	.btn2{
		height: 50px;
		width: 50px;
		border-radius: 50px;
		background-color: #90A672;
		color: white;
	}
	.btn3{
		height: 50px;
		width: 50px;
		border-radius: 50px;
		background-color:rgb(255, 0, 0,.5) ;
		color: white;
	}
	.single{
		width: 600rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding-bottom: 20px;
	}
	.fillBlank{
		width: 600rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding-bottom: 20px;
	}
	
/* 	.btn1{
			height: 50px;
			width: 50px;
			border-radius: 50px;
			background-color: darkgray;
			color: white;
		}
		.btn2{
			height: 50px;
			width: 50px;
			border-radius: 50px;
			background-color: dodgerblue;
			color: white;
		} */
		
</style>
